<template>
  <el-form ref="formRef" :model="model" label-position="left" :rules="rules">

    <el-form-item prop="type" label="车辆类型" :label-width="labelWidth">
      <!--      <el-input-->
      <!--        v-model="model.type"-->
      <!--        placeholder="请输入车辆类型"-->
      <!--      />-->
      <el-select v-model="model.type" placeholder="请选择车辆类型">
        <el-option v-for="item in vehicleType" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>

    <el-form-item
      v-if="licensePlateNumberInputVisible"
      prop="license_plate_number"
      label="车牌号"
      :label-width="labelWidth"
    >
      <el-input v-model="model.license_plate_number" placeholder="请输入车牌号" />
    </el-form-item>

    <el-form-item prop="load_capacity" label="核载人数" :label-width="labelWidth">
      <el-input-number v-model="model.load_capacity" :min="1" :max="500" placeholder="请输入核载人数" />
    </el-form-item>

    <el-form-item prop="is_available" label="是否可用" :label-width="labelWidth">
      <el-switch v-model="model.is_available" :inactive-value="0" :active-value="1" />
    </el-form-item>

    <el-form-item prop="examine" label="是否需要审核" :label-width="labelWidth">
      <el-switch v-model="model.examine" :inactive-value="1" :active-value="0" />
      <el-tooltip effect="dark" content="使用该辆车的派车单是否需要审核" placement="right">
        <i class="el-icon-info" style="margin-left: 20px;" />
      </el-tooltip>

    </el-form-item>
    <el-space fill>
      <el-alert type="warning" title="未经开发人员允许，请勿擅自更换imei" style="margin-bottom: 10px;" effect="dark" :closable="false" />
      <el-form-item label="imei" :label-width="labelWidth">
        <el-input v-model="model.imei" placeholder="请输入imei" />
      </el-form-item>
    </el-space>
  </el-form>
</template>
<script>
import { getVehicleType } from '@/api/vehicleService'
export default {
  name: '',
  props: {
    model: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      labelWidth: '100px',
      rules: {
        type: [{ required: true, message: '请输入车辆类型', trigger: ['change', 'blur'] }],
        license_plate_number: [
          { required: true, message: '请输入车牌号', trigger: ['change', 'blur'] },
          {
            validator: (rule, value, callback) => {
              if (!value) callback(new Error('车牌号不能为空'))
              const len = value.length
              if (len !== 7 && len !== 8) callback(new Error('请输入正确的车牌号'))
              const PLATE_NO_PATTERN = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼]{1}[A-HJ-NP-Z]{1}(([A-HJ-NP-Z0-9]{5})|([0-9]{6}|[A-HJ-NP-Z]{1}[0-9]{5}|[0-9]{5}[A-HJ-NP-Z]{1}|[A-HJ-NP-Z]{2}[0-9]{4}))$/
              if (PLATE_NO_PATTERN.test(value)) {
                // 新能源车
                if (len === 8) callback()
                // 7位时,后5位最多包含2位字母校验
                const arr = value.match(/[A-HJ-NP-Z]/g)
                if (arr.length <= 3) callback()
              }
              callback(new Error('请输入正确的车牌号'))
            },
            trigger: 'blur'
          }
        ],
        load_capacity: [{ required: true, message: '请输入核载人数', trigger: ['change', 'blur'] }]
      },
      vehicleType: []
    }
  },
  computed: {
    findTypeInfo() {
      if (!this.model) return []
      console.log('123123 --------->', 123123)
      return this.vehicleType.filter(item => item.id === this.model?.type)
    },
    licensePlateNumberInputVisible() {
      if (this.findTypeInfo.length <= 0) return true
      return this.findTypeInfo[0]?.type !== 'noDriver'
    }
  },
  created() {
    this.getVehicleType()
  },
  methods: {
    resetFields() {
      this.$refs.formRef.resetFields()
    },

    validate() {
      return new Promise(resolve => {
        this.$refs.formRef.validate(flag => {
          console.log('flag --------->', flag)
          resolve(flag)
        })
      })
    },

    async getVehicleType() {
      try {
        const res = await getVehicleType()
        console.log('res --------->', res)
        this.vehicleType = res.data
      } catch (error) {
        throw new Error(error.message)
      }
    }
  }
}
</script>
<style lang="scss" scoped></style>
